<script setup>
import { onMounted, ref } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

import { Select } from 'ant-design-vue';

import { nextTick } from 'vue';

import {
  getIntegralTrend,
} from '#/api/largeVisualScreen/smallProgram';


onMounted(async () => {
  await nextTick();
  renderEcharts(option1.value);
});

const chartRef = ref(null);
const { renderEcharts } = useEcharts(chartRef);

// 各组织积分趋势数据
const option1 = ref({
  backgroundColor: 'transparent',
  grid: {
    top: 40,
    bottom: 20,
    left: '3%',
    right: '4%',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  xAxis: {
    type: 'category',
    data: [
      '1月',
      '2月',
      '3月',
      '4月',
      '5月',
      '6月',
      '7月',
      '8月',
      '9月',
      '10月',
      '11月',
      '12月',
    ],
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
    },
  },
  yAxis: {
    type: 'value',
    name: '积分',
    nameTextStyle: {
      color: '#fff',
      padding: [0, 0, 5, 0],
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)',
      },
    },
  },
  series: [
    {
      type: 'bar',
      barWidth: '30%',
      animation: {
        duration: 2000,
        easing: 'cubicInOut',
      },
      data: [120, 200, 150, 80, 70, 110, 130, 160, 140, 90, 100, 180],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(64, 158, 255, 1)',
            },
            {
              offset: 1,
              color: 'rgba(64, 158, 255, 0.1)',
            },
          ],
        },
        borderRadius: [5, 5, 0, 0],
        shadowColor: 'rgba(64, 158, 255, 0.5)',
        shadowBlur: 10,
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 20,
          shadowColor: 'rgba(64, 158, 255, 0.8)',
        },
      },
    },
  ],
});

getIntegralTrend("0").then((res)=>{
    console.log("积分趋势图数据",res);
  });

// 组织列表数据
const orgList = ref(
  Array.from({ length: 26 }, (_, i) => ({
    value: `org${i + 1}`,
    label: `二级组织${i + 1}`,
  })),
);

// 当前选中的组织
const selectedOrg = ref('org1');

onMounted(async () => {
  await nextTick();
  renderEcharts(option1.value);
  handleOrgChange(selectedOrg.value);
});

// dataZoom显示状态
const showDataZoom = ref(true);

// 切换dataZoom显示
const toggleDataZoom = () => {
  showDataZoom.value = !showDataZoom.value;
  updateChartOptions();
};

// 组织选择变化处理
const handleOrgChange = async (value) => {
  selectedOrg.value = value;
  // TODO: 这里可以根据选中的组织调用接口获取数据
  // 模拟更新数据
  const newData = Array.from(
    { length: 12 },
    () => Math.floor(Math.random() * 200) + 50,
  );
  option1.value.xAxis.data = Array.from({ length: 12 }, (_, i) => `${i + 1}月`);
  option1.value.series[0].data = newData;
  await nextTick();
  renderEcharts(option1.value);

};

// 更新图表配置并重新渲染
const updateChartOptions = async () => {
  // 根据showDataZoom状态决定是否显示dataZoom
  option1.value.dataZoom = showDataZoom.value
    ? [
        {
          type: 'inside',
        },
        {
          type: 'slider',
        },
      ]
    : [];
  await nextTick();
  renderEcharts(option1.value);
};
</script>

<template>
  <dv-border-box-13 class="bottom-right-chart map">
    <div class="mb-2 flex items-center justify-between px-4">
      <h3 class="text-lg text-white">
        <!-- {{ flag ? '积分趋势(整体)' : '积分趋势(各级组织)' }} -->
      </h3>
      <div class="flex items-center gap-4">
        <Select
          v-model:value="selectedOrg"
          placeholder="请选择组织"
          style="width: 140px"
          class="custom-select"
          @change="handleOrgChange"
        >
          <Select.Option
            v-for="org in orgList"
            :key="org.value"
            :value="org.value"
          >
            {{ org.label }}
          </Select.Option>
        </Select>
        <div @click="toggleDataZoom" class="toggle-switch" :class="{ 'active': !showDataZoom }">
          {{ showDataZoom ? '关闭' : '开启' }}
        </div>
      </div>
    </div>
    <EchartsUI
      ref="chartRef"
      class="w-full"
      style="height: calc(100% - 50px)"
    />
  </dv-border-box-13>
</template>

<style lang="scss" scoped>
@keyframes scanning {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

@keyframes pulse {
  0% { opacity: 0.6; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0.6; transform: scale(0.8); }
}

.bottom-right-chart {
  width: 100%;
  height: 100%;
  padding-top: 20px;

  :deep(.custom-select) {
    .ant-select-selector {
      background: linear-gradient(
        135deg,
        rgba(32, 187, 252, 0.1),
        rgba(32, 187, 252, 0.05)
      ) !important;
      border: 1px solid rgba(32, 187, 252, 0.3) !important;
      box-shadow: 0 0 15px rgba(32, 187, 252, 0.2) !important;
      backdrop-filter: blur(8px);
    }

    .ant-select-selection-placeholder,
    .ant-select-selection-item {
      color: rgba(255, 255, 255, 0.9) !important;
      text-shadow: 0 0 8px rgba(32, 187, 252, 0.5);
    }

    .ant-select-arrow {
      color: rgba(32, 187, 252, 0.9) !important;
      text-shadow: 0 0 8px rgba(32, 187, 252, 0.5);
    }

    &:hover .ant-select-selector {
      border-color: rgba(32, 187, 252, 0.5) !important;
      box-shadow: 0 0 20px rgba(32, 187, 252, 0.3) !important;
      background: linear-gradient(
        135deg,
        rgba(32, 187, 252, 0.15),
        rgba(32, 187, 252, 0.1)
      ) !important;
    }

    &.ant-select-focused .ant-select-selector {
      border-color: rgba(32, 187, 252, 0.7) !important;
      box-shadow: 0 0 25px rgba(32, 187, 252, 0.4) !important;
    }
  }

  .toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: 6px 14px;
    border-radius: 24px;
    background: linear-gradient(
      135deg,
      rgba(0, 30, 60, 0.7),
      rgba(0, 20, 40, 0.9)
    );
    border: 1px solid rgba(0, 200, 255, 0.4);
    box-shadow: 
      0 0 15px rgba(0, 200, 255, 0.4),
      inset 0 0 8px rgba(0, 150, 255, 0.2);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.17, 0.67, 0.83, 0.67);
    text-shadow: 0 0 8px rgba(0, 220, 255, 0.8);
    color: rgba(220, 240, 255, 0.9);
    font-weight: 500;
    letter-spacing: 1px;
    overflow: hidden;
    z-index: 1;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.1), transparent);
      transform: translateX(-100%);
      animation: scanning 3s infinite;
      z-index: -1;
    }
    
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 10px;
      width: 6px;
      height: 6px;
      background-color: rgba(0, 220, 255, 0.8);
      border-radius: 50%;
      box-shadow: 0 0 10px 2px rgba(0, 220, 255, 0.6);
      transform: translateY(-50%);
      opacity: 0.8;
      transition: all 0.3s ease;
    }

    &:hover {
      background: linear-gradient(
        135deg,
        rgba(0, 40, 80, 0.8),
        rgba(0, 30, 60, 1)
      );
      border-color: rgba(0, 220, 255, 0.6);
      box-shadow: 
        0 0 25px rgba(0, 220, 255, 0.5),
        inset 0 0 12px rgba(0, 180, 255, 0.3);
      text-shadow: 0 0 12px rgba(0, 220, 255, 1);
      transform: translateY(-2px);
    }

    &:active {
      transform: scale(0.96) translateY(0);
      box-shadow: 
        0 0 30px rgba(0, 220, 255, 0.6),
        inset 0 0 15px rgba(0, 180, 255, 0.4);
    }
    
    // 开关状态样式差异
    &:not(:hover)::after {
      animation: pulse 2s infinite;
    }
    
    // 开启状态特殊样式
    &.active {
      background: linear-gradient(
        135deg,
        rgba(0, 60, 100, 0.8),
        rgba(0, 40, 80, 1)
      );
      border-color: rgba(0, 255, 220, 0.6);
      box-shadow: 
        0 0 20px rgba(0, 255, 220, 0.5),
        inset 0 0 10px rgba(0, 255, 200, 0.3);
        
      &::after {
        left: auto;
        right: 10px;
        background-color: rgba(0, 255, 220, 0.8);
        box-shadow: 0 0 10px 2px rgba(0, 255, 220, 0.6);
      }
    }
  }
}
</style>

